<template>
  <bsCard class="lifeCircle-wrapper" :width="getBsLRWPercent(520)" :height="`${cardHeight}px`">
    <div class="lefeCircle-top">
      <div class="bs-card-title">企业生命周期</div>
      <el-select class="bs-select" popper-class="bs-popper" v-model="industryType" placeholder="请选择行业" size="small" @change="handleChange">
        <el-option v-for="item in options" :key="item.dicCode" :label="item.dicName" :value="item.dicCode"></el-option>
      </el-select>
    </div>

    <app-echarts :height="`${cardHeight - cardTitleHeight - 20}px`" :options="echartsOption" />
  </bsCard>
</template>

<script>
import '../styles/index.scss'
import bsCard from './bsCard.vue'
import appEcharts from './appEcharts.vue'
import { getBusinessLifeCycle, getIndustryCategory } from '@/api/bigscreen'
import { colors } from '../components/tools'
export default {
  name: 'lifeCircle',
  components: {
    bsCard,
    appEcharts
  },
  inject: ['getBsLRWPercent', 'cardTitleHeight'],
  data() {
    return {
      cardHeight: 320,
      //
      industryType: '',
      options: [],
      //
      echartsOption: {
        color: colors,
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            // name: '',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
    this.fetchIndustryCategory()
  },
  methods: {
    async fetchData() {
      try {
        const res = await getBusinessLifeCycle({
          industryType: this.industryType
        })
        if (res.resultCode === 200) {
          // res.resultData
        }
      } catch (error) {
        console.log(error)
      }
    },
    async fetchIndustryCategory(){
      try {
        const res = await getIndustryCategory()
        if(res.resultCode === 200) {
          this.options = res.resultData || []
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleChange(){
      this.fetchData()
    },
    renderData(data){
      // this.echartsOption.series[0].data =
    }
  }
}
</script>

<style lang='scss'>
.lifeCircle-wrapper {
  .lefeCircle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>

